<template>
  <el-row :gutter="20" class="seach-dom">
    <template v-for="(item, key) in inputList">
      <el-col :span="8" v-bind:key="key" v-if="key < 3" class="colbnt">
        <div class="block" v-if="item.type !== 'open'">
          <p v-if="cascade_if && key > 2">{{ item.name }}</p>
          <p v-if="key < 2">{{ item.name }}</p>

          <el-input
            :placeholder="item.placeholder"
            v-model="search[item.value]"
            v-if="item.type == 'Input' && key < 2"
          ></el-input>

          <el-date-picker
            v-else-if="item.type == 'DatePicker' && key < 2"
            v-model="search[item.value]"
            type="date"
            value-format="yyyy-MM-dd"
            :placeholder="item.placeholder"
          >
          </el-date-picker>

          <el-select
            style="width: 100%"
            :filterable="true"
            v-else-if="item.type === 'Select' && key < 2"
            v-model="search[item.value]"
            :placeholder="item.placeholder"
          >
            <el-option
              v-for="items in item.otherConfig.sourceData"
              v-bind:key="items.code"
              :label="items.content"
              :value="items.code"
            >
            </el-option>
          </el-select>
        </div>
        <div class="tjbtn" v-else>
          <div>
            <el-button
              type="primary"
              class="primaryBtn"
              @click="getseach"
              icon="el-icon-search"
              >查 询</el-button
            >
            <el-button
              class="czd"
              plain
              icon="el-icon-refresh-right"
              @click="onReset"
              >重 置</el-button
            >
            <span v-if="inputList.length > 3" class="shifzank">
              <a
                href="javascript:;"
                style="font-size: 14px; white-space: nowrap"
                @click="ischeck"
                >展开
                <i
                  :class="
                    cascade_if ? 'el-icon-arrow-up' : 'el-icon-arrow-down'
                  " /></a
            ></span>
          </div>
        </div>
      </el-col>
    </template>
    <template v-for="(item, key) in inputList">
      <el-col
        :span="8"
        v-bind:key="key"
        v-if="key > 2 && cascade_if"
        class="colbnt"
      >
        <div class="block" v-if="item.type !== 'open'">
          <p v-if="cascade_if && key > 2">{{ item.name }}</p>
          <p v-if="key < 2">{{ item.name }}</p>
          <el-input
            :placeholder="item.placeholder"
            v-model="search[item.value]"
            v-if="item.type == 'Input' && cascade_if && key > 2"
          ></el-input>

          <el-date-picker
            style="width: 100%"
            v-if="item.type === 'DatePicker' && cascade_if && key > 2"
            v-model="search[item.value]"
            type="date"
            value-format="yyyy-MM-dd"
            :placeholder="item.placeholder"
          >
          </el-date-picker>

          <el-select
            style="width: 100%"
            :filterable="true"
            v-else-if="item.type === 'Select' && cascade_if && key > 2"
            v-model="search[item.value]"
            :placeholder="item.placeholder"
          >
            <el-option
              v-for="items in item.otherConfig.sourceData"
              v-bind:key="items.code"
              :label="items.content"
              :value="items.code"
            >
            </el-option>
          </el-select>
        </div>
      </el-col>
    </template>
  </el-row>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  name: 'Search',
  props: {
    inputList: {
      type: Array,
      default: () => []
    },
    search: {
      type: Object,
      default: () => {}
    }
  },
  components: {},
  data() {
    //这里存放数据
    return {
      cascade_if: false
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    onReset() {
      this.$emit('onReset');
    },
    getseach() {
      // console.log("search====",this.inputList)
      this.$emit('getseach');
    },
    ischeck() {
      this.cascade_if = !this.cascade_if;
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped>
.tjbtn {
  height: 67px;
  display: flex;
  align-items: flex-end;
  /* margin-bottom: 18px; */
}
.tjbtn > div {
  display: flex;
  align-items: center;
}
.shifzank a {
  color: #3a52f0;
}
.seach-dom {
  display: flex;
  flex-wrap: wrap;
}
.seach-dom p {
  font-family: SourceHanSansCN-Normal;
  font-size: 14px;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0px;
  color: #86869e;
  margin-bottom: 12px;
  margin-top: 0px;
}
.village_top .el-row {
  margin-left: 0px !important;
  margin-right: 0px !important;
}
.colbnt {
  padding-left: 0px !important;
  padding-right: 40px !important;
  margin-bottom: 20px;
}
.czd {
  margin: 0 20px;
}
</style>
